<template>
  <div>
    <el-dialog
      title="详细信息"
      :visible.sync="dialogVisible"
      width="800px"
      destroy-on-close
    >
      <el-card class="box-card" style="height: 300px; overflow: auto">
    
        <!-- <div>
          {{ empCheckList }}
        </div> -->

        <el-checkbox-group v-model="empCheckList">
          <el-row>
            <el-col v-for="(it, indx) in employeeList" :span="6" :key="indx">
              <el-checkbox style="margin-top: 10px" :label="it.id">{{
                getEmpName(it)
              }}</el-checkbox>
            </el-col>
          </el-row>
        </el-checkbox-group>
      </el-card>
      <!-- <el-form ref="form" :model="form" :rules="rules" label-width="120px">
        <el-row>
        {{ employeeList }}

        </el-row>
      </el-form> -->
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" :disabled="empCheckList.length === 0" @click="submitForm">确 定</el-button>
        <el-button @click="dialogVisible = false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { projectService, employeeService } from "@/api/hrService";

export default {
  dicts: [],
  components: {},

  data() {
    return {
      resolve: null,
      dialogVisible: false,
      employeeList: [],
      empIds: [],
      posId: "",
      empCheckList: [],

      // 表单参数
      form: {
        id: "",
        name: undefined,
        description: undefined,
        startDate: undefined,
        endDate: undefined,
      },
    };
  },
  methods: {
    getEmpName(row) {
      return `${row.department?.name??""} - ${row.firstName}`;
    },

    loadEmployee() {
      employeeService.list({ size: 100 }).then((response) => {
        this.employeeList = response.data?.data;
        
      });
    },
    open(row) {
      
      console.log(row);
      this.projectId = row.id;
      this.empCheckList = row.assignmentList.map(el => el.employee?.id) || [];
      this.loadEmployee();
      this.dialogVisible = true;
    
      return new Promise((resolve) => {
        this.resolve = resolve;
      });
    },
    /** 提交按钮 */
    submitForm: function () {
      projectService.postEmp({ id: this.projectId, empIds: this.empCheckList }).then((response) => {
            this.$modal.msgSuccess("操作成功");
            this.dialogVisible = false;
            // this.getList();
            this.resolve(response.data);
          });
    },

    // 取消按钮
    cancel() {
      this.dialogVisible = false;
      // this.reset();
    },
  },
};
</script>

<style lang="scss" scoped></style>
